"use client"; // 指定这是一个客户端组件

import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
    AlertDialogTrigger
} from "@/components/ui/alert-dialog"; // 从指定路径导入多个组件

interface ConfirmModalProps {
    children: React.ReactNode; // 子元素，可以是任何 React 节点
    onConfirm: () => void; // 确认操作的回调函数
    disabled?: boolean; // 可选属性，表示是否禁用
    header: string; // 标题，类型为字符串
    description?: string; // 可选属性，描述，类型为字符串
  }

export const ConfirmModal = ({
    children,
    onConfirm,
    disabled,
    header,
    description,
  }: ConfirmModalProps) => {
    
        const handleConfirm=()=>{
            onConfirm();
        }

    return (
      <AlertDialog>
        {/* AlertDialog 组件，用于显示确认对话框 */}
        <AlertDialogTrigger asChild>
          {/* AlertDialogTrigger 组件，作为子元素触发对话框 */}
          {children}
          {/* 触发对话框的子元素 */}
        </AlertDialogTrigger>
        {/* 其他 AlertDialog 相关内容 */}
        <AlertDialogContent>
            <AlertDialogHeader>
                <AlertDialogTitle>
                    {header}
                </AlertDialogTitle>
                <AlertDialogDescription>
                    {description}
                </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
                <AlertDialogCancel>
                    Cancel
                </AlertDialogCancel>
                <AlertDialogAction
                    disabled={disabled}
                    onClick={handleConfirm}
                >
                    Confirm
                </AlertDialogAction>
            </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    );
  };